<template>
    <div class="page">
      <div class="page-top">
        <!-- 面包屑 -->
        <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
      </div>
      <div class="page-content">
        <a-form-model
          layout="inline"
          style="margin-bottom: 20px"
          :form="form"
          @submit="handleSubmit"
        >
          <a-form-model-item label="日志类型">
            <a-select
              default-value="全部"
              style="width: 100px"
              v-model="form.errorType"
            >
              <a-select-option value="全部"> 全部 </a-select-option>
              <a-select-option value="info日志"> info日志 </a-select-option>
              <a-select-option value="错误日志"> 错误日志 </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="创建时间">
            <a-range-picker
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              v-model="timeValue"
              @change="bindTime"
            />
          </a-form-model-item>
          <a-form-model-item label="管易单号">
            <a-input v-model="form.gyOrderNo"></a-input>
          </a-form-model-item>
          <a-form-model-item label="飞迩单号">
            <a-input v-model="form.scsOrderNo"></a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" html-type="submit"> 提交 </a-button>
            <a-button style="margin-left: 15px" @click="bindReset">
              重置
            </a-button>
          </a-form-model-item>
        </a-form-model>
        <a-table
          :columns="columns"
          :data-source="data"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <span slot="content">...</span>
          <span slot="errorMessage">...</span>
          <p slot="expandedRowRender" slot-scope="record" style="width: 1200px">
            日志内容：
            <br />
            {{ record.content }}
            <br />
            <br />
            错误信息：
            <br />
            {{ record.errorMessage }}
          </p>
        </a-table>
      </div>
    </div>
  </template>
  <script>
  import Hreadcrumb from "@/components/Hreadcrumb";
  import { getGYLogList } from "@/request/api";
  export default {
    data() {
      return {
        loading: false,
        hreadcrumbAry: [
          { name: "首页", path: "/", query: {} },
          { name: "日志管理", path: "", query: {} },
          { name: "京东日志", path: "/loglist", query: {} },
        ],
        columns: [
        {
            title: "管易单号",
            dataIndex: "gyOrderNo",
            key: "gyOrderNo",
          },
          {
            title: "飞迩单号",
            dataIndex: "scsOrderNo",
            key: "scsOrderNo",
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            width: 120,
          },
          {
            title: "日志内容",
            dataIndex: "content",
            key: "content",
            slots: { title: "日志内容" },
            scopedSlots: { customRender: "content" },
          },
          {
            title: "错误信息",
            dataIndex: "errorMessage",
            key: "errorMessage",
            slots: { title: "错误信息" },
            scopedSlots: { customRender: "errorMessage" },
          },
        ],
        pagination: { current: 1, size: 10 },
        data: [],
        form: {
          scsOrderNo: "",
          gyOrderNo: "",
          errorType: "全部",
          startTime: "",
          endTime: "",
        },
        timeValue: undefined,
      };
    },
    components: {
      Hreadcrumb,
    },
    created() {
      this.getGYLogList(1, 10);
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: "validate_other" });
    },
    methods: {
      async getGYLogList(p, ps) {
        this.loading = true;
        let errorType =
            this.form.errorType == "全部"
              ? -1
              : this.form.errorType == "info日志"
              ? 0
              : 1
        let { startTime, endTime } = this.form;
        let params =
          "p=" +
          (p - 1) +
          "&ps=" +
          ps +
          "&errorType=" +
          errorType +
          "&systemType=1&startTime=" +
          startTime +
          "&endTime=" +
          endTime +
          "&scsOrderNo=" +
          this.form.scsOrderNo +
          "&gyOrderNo=" +
          this.form.gyOrderNo;
        let { data } = await getGYLogList(params);
        console.log(data);
        if (data.success) {
          this.loading = false;
          let pagination = { ...this.pagination };
          pagination.total = data.content.total;
          this.pagination = pagination;
          this.data = data.content.records;
        } else {
          this.loading = false;
          this.data = [];
        }
      },
      handleTableChange(pagination) {
        console.log(pagination);
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        this.pagination = pager;
        this.getGYLogList(pager.current, pager.size);
      },
      handleSubmit(e) {
        e.preventDefault();
        console.log(this.form);
        this.getGYLogList(1, 10);
      },
      bindTime(date, dateString) {
        console.log(date, dateString);
        this.form.startTime = dateString[0];
        this.form.endTime = dateString[1];
      },
      bindReset() {
        this.form = {
          gyOrderNo: "",
          scsOrderNo: "",
          errorType: "全部",
          startTime: "",
          endTime: "",
        };
        this.timeValue = undefined;
        this.getGYLogList(1, 10);
      },
    },
  };
  </script>
  <style>
  .page-content {
    background-color: #fff;
    padding: 25px;
  }
  </style>